import React from 'react'
import ReactDOM from 'react-dom'
import './1.less'
var name = '你好 珠峰';
/* 
  jsx
  结构中的变量 都得用 {} 包起来
  组件的根元素 只能有一个标签 但是可以是一个空标签
  结构中不能编写关键字 class-->className  for--->htmlFor
  结构中 不能直接把对象 作为儿子；若是数组 则直接把拼接的结果扔到了结构中
  循环结构 一般使用map 
  style={{color:'red'}} 这不是小胡子 而是 大括号 包了一个对象
  结构中的判断一般使用 三元运算符

*/
function mymap(ary){
  let t = [];
  for(var i = 0; i <ary.length ; i++){
    t.push(<li key={i+10}>{ary[i]}</li>)
  }
  return t;
}
function List(){
  var obj = {a:12,b:13};
  var h1 = <h1 className='box'>哈哈哈</h1>;
  var ary = [1,2,3,4,5];
  // var ary2 = [<i>1</i>,<i>2</i>,<i>3</i>,<i>4</i>]
  let sty = {color:'red'}
  var col = 'blue'
  var href = 'https://baidu.com'
  function fn(){
    if(1 > 2){
      return <h2>666</h2>
    }else{
      return <h3>888</h3>
    }
  }
  return <ul className={'box '+name} className={`box ${name}`} style={{color:col}}>
    {
      ary.map(item=>{
        // [<li>1</li>,<li>2</li>,....]
        return <li key={item}>{item}</li>
      })
    }
    {mymap(ary)}
    <li><a href='https://baidu.com'></a></li>
    <li><a href={href}></a></li>
    <li>{
      1 > 2 ? <h2>1>2</h2> : <h1>1 《= 2</h1>
    }</li>
    <li>{fn()}</li>
    <li>{name}</li>
    <li>{obj.a}</li>
    <li>{h1}</li>
    <li>{obj.b}</li>
    <li>{ary}</li>
    <li>
      {/* {ary2} */}
      <input type="checkbox" name="" id="qqq"/><label htmlFor="qqq">珠峰</label>
    </li>
  </ul>
}
let w = <h1 className='qqqq'>哈哈哈</h1>
let q = React.createElement('h1',{className:'qqqq'},'哈哈哈')
ReactDOM.render(<>
  <h2>我的react</h2>
  {q}
  {w}
  {/* 在react的结构模板中  想要使用变量  需要用 {变量和表达式 使用方法 类似于vue的小胡子} 包起来 */}
  {name}
  <List></List>
</>,document.querySelector('#root'))